<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔬菜库 - 植蔬记</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                        secondary: '#8BC34A',
                        accent: '#FFC107',
                        light: '#F5F5F5',
                        dark: '#2E7D32',
                        danger: '#F44336',
                        success: '#4CAF50',
                        warning: '#FF9800',
                        info: '#2196F3',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-transition {
                transition: all 0.3s ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="backButton" class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-arrow-left text-gray-600 text-lg"></i>
                </button>
                <h1 class="text-xl font-bold text-primary">蔬菜库</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-search text-gray-600 text-lg"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-user text-gray-600 text-lg"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-1 container mx-auto px-4 py-6">
        <!-- 搜索框 -->
        <div class="relative mb-6">
            <input
                type="text"
                id="searchInput"
                placeholder="搜索蔬菜..."
                class="w-full py-3 px-5 pr-12 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 shadow-sm"
            />
            <i class="fa fa-search absolute right-5 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>

        <!-- 分类标签 -->
        <div class="flex overflow-x-auto scrollbar-hide space-x-2 mb-6 pb-2">
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-primary text-white font-medium text-sm transition-all duration-200 shadow-sm">
                全部
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                叶菜类
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                果菜类
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                根茎类
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                花菜类
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                菌类及其他
            </button>
        </div>

        <!-- 蔬菜列表 -->
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <!-- 叶菜类 -->
            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="叶菜类" data-name="生菜">
                <div class="h-32 bg-green-100 flex items-center justify-center">
                    <i class="fa fa-leaf text-primary text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">生菜</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约30天</p>
                </div>
            </div>

            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="叶菜类" data-name="菠菜">
                <div class="h-32 bg-green-200 flex items-center justify-center">
                    <i class="fa fa-leaf text-dark text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">菠菜</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约45天</p>
                </div>
            </div>

            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="叶菜类" data-name="油菜">
                <div class="h-32 bg-green-300 flex items-center justify-center">
                    <i class="fa fa-leaf text-primary text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">油菜</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约35天</p>
                </div>
            </div>

            <!-- 果菜类 -->
            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="果菜类" data-name="番茄">
                <div class="h-32 bg-red-100 flex items-center justify-center">
                    <i class="fa fa-tint text-red-500 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">番茄</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约70天</p>
                </div>
            </div>

            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="果菜类" data-name="黄瓜">
                <div class="h-32 bg-green-200 flex items-center justify-center">
                    <i class="fa fa-certificate text-green-600 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">黄瓜</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约60天</p>
                </div>
            </div>

            <!-- 根茎类 -->
            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="根茎类" data-name="胡萝卜">
                <div class="h-32 bg-orange-100 flex items-center justify-center">
                    <i class="fa fa-cutlery text-orange-500 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">胡萝卜</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约80天</p>
                </div>
            </div>

            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="根茎类" data-name="土豆">
                <div class="h-32 bg-yellow-100 flex items-center justify-center">
                    <i class="fa fa-cutlery text-yellow-600 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">土豆</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约90天</p>
                </div>
            </div>

            <!-- 花菜类 -->
            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="花菜类" data-name="西兰花">
                <div class="h-32 bg-green-100 flex items-center justify-center">
                    <i class="fa fa-diamond text-green-500 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">西兰花</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约70天</p>
                </div>
            </div>

            <!-- 菌类及其他 -->
            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="菌类及其他" data-name="香菇">
                <div class="h-32 bg-brown-100 flex items-center justify-center">
                    <i class="fa fa-tree text-brown-600 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">香菇</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约60天</p>
                </div>
            </div>

            <div class="vegetable-card bg-white rounded-2xl overflow-hidden shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer" data-category="菌类及其他" data-name="平菇">
                <div class="h-32 bg-brown-200 flex items-center justify-center">
                    <i class="fa fa-tree text-brown-700 text-4xl"></i>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold text-gray-800 truncate">平菇</h3>
                    <p class="text-sm text-gray-500 mt-1">生长期约45天</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="tasks.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <!-- 蔬菜详情模态框 -->
    <div id="vegetableModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm" id="modalOverlay"></div>
        <div class="relative bg-white rounded-3xl w-[90%] max-w-md max-h-[90vh] overflow-y-auto">
            <div id="modalHeader" class="p-5 pb-2 flex justify-between items-center">
                <h2 id="modalTitle" class="text-xl font-bold text-gray-800">蔬菜详情</h2>
                <button id="closeModal" class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-times text-gray-600"></i>
                </button>
            </div>
            <div class="p-5">
                <div id="modalIconContainer" class="w-20 h-20 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
                    <i id="modalIcon" class="fa fa-leaf text-primary text-4xl"></i>
                </div>
                <h3 id="modalVegetableName" class="text-center text-xl font-bold text-gray-800 mb-2">生菜</h3>
                <p id="modalGrowthPeriod" class="text-center text-gray-500 mb-4">生长期约30天</p>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">植物类别</h4>
                        <p id="modalCategory" class="text-gray-600">叶菜类</p>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">植物描述</h4>
                        <p id="modalDescription" class="text-gray-600">生菜是一种常见的叶菜类蔬菜，富含维生素和矿物质，可生食或烹饪。</p>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">种植要点</h4>
                        <ul id="modalTips" class="text-gray-600 space-y-2 list-disc list-inside">
                            <li>适宜生长温度为15-20℃</li>
                            <li>保持土壤湿润但不过湿</li>
                            <li>生长期需要充足的光照</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="p-5 pt-2 flex justify-center">
                <button id="addPlantBtn" class="w-full py-3 bg-primary text-white font-medium rounded-full shadow-md hover:bg-primary/90 transition-colors duration-200">
                    开始种植
                </button>
            </div>
        </div>
    </div>

    <script>
        // 植物数据映射
        const plantData = {
            '生菜': {
                category: '叶菜类',
                icon: 'fa-leaf',
                iconColor: 'text-primary',
                bgColor: 'bg-green-100',
                growthPeriod: '生长期约30天',
                description: '生菜是一种常见的叶菜类蔬菜，富含维生素和矿物质，可生食或烹饪。',
                tips: [
                    '适宜生长温度为15-20℃',
                    '保持土壤湿润但不过湿',
                    '生长期需要充足的光照'
                ]
            },
            '菠菜': {
                category: '叶菜类',
                icon: 'fa-leaf',
                iconColor: 'text-dark',
                bgColor: 'bg-green-200',
                growthPeriod: '生长期约45天',
                description: '菠菜是一种营养丰富的绿叶蔬菜，富含铁、维生素A和维生素C。',
                tips: [
                    '适宜生长温度为15-20℃',
                    '较耐阴，但充足光照可提高产量',
                    '对土壤要求不高，但需保持湿润'
                ]
            },
            '油菜': {
                category: '叶菜类',
                icon: 'fa-leaf',
                iconColor: 'text-primary',
                bgColor: 'bg-green-300',
                growthPeriod: '生长期约35天',
                description: '油菜是一种速生叶菜，口感脆嫩，适合清炒或煮汤。',
                tips: [
                    '生长适温为18-25℃',
                    '对光照要求较高',
                    '生长期间需保持土壤湿润'
                ]
            },
            '番茄': {
                category: '果菜类',
                icon: 'fa-tint',
                iconColor: 'text-red-500',
                bgColor: 'bg-red-100',
                growthPeriod: '生长期约70天',
                description: '番茄是一种广受欢迎的果菜类蔬菜，富含维生素C和番茄红素。',
                tips: [
                    '喜温暖，生长适温为20-28℃',
                    '需要搭架支撑生长',
                    '需充足光照和水分'
                ]
            },
            '黄瓜': {
                category: '果菜类',
                icon: 'fa-certificate',
                iconColor: 'text-green-600',
                bgColor: 'bg-green-200',
                growthPeriod: '生长期约60天',
                description: '黄瓜是一种常见的瓜类蔬菜，可生食或用于凉拌、炒菜等。',
                tips: [
                    '生长适温为20-30℃',
                    '需要搭架或吊绳栽培',
                    '喜湿润，需定期浇水'
                ]
            },
            '胡萝卜': {
                category: '根茎类',
                icon: 'fa-cutlery',
                iconColor: 'text-orange-500',
                bgColor: 'bg-orange-100',
                growthPeriod: '生长期约80天',
                description: '胡萝卜是一种根茎类蔬菜，富含胡萝卜素，对视力有益。',
                tips: [
                    '生长适温为15-25℃',
                    '适合在疏松、肥沃的土壤中生长',
                    '需保持土壤湿润但不过湿'
                ]
            },
            '土豆': {
                category: '根茎类',
                icon: 'fa-cutlery',
                iconColor: 'text-yellow-600',
                bgColor: 'bg-yellow-100',
                growthPeriod: '生长期约90天',
                description: '土豆是一种重要的粮食作物，富含淀粉和多种维生素。',
                tips: [
                    '生长适温为15-20℃',
                    '喜欢疏松、肥沃、排水良好的土壤',
                    '需定期中耕培土'
                ]
            },
            '西兰花': {
                category: '花菜类',
                icon: 'fa-diamond',
                iconColor: 'text-green-500',
                bgColor: 'bg-green-100',
                growthPeriod: '生长期约70天',
                description: '西兰花是一种营养丰富的花菜类蔬菜，富含维生素C和膳食纤维。',
                tips: [
                    '生长适温为15-22℃',
                    '对土壤要求较高，需肥沃、排水良好',
                    '需充足光照'
                ]
            },
            '香菇': {
                category: '菌类及其他',
                icon: 'fa-tree',
                iconColor: 'text-brown-600',
                bgColor: 'bg-brown-100',
                growthPeriod: '生长期约60天',
                description: '香菇是一种常见的食用菌类，味道鲜美，营养丰富。',
                tips: [
                    '适宜生长温度为18-22℃',
                    '需要较高的湿度环境',
                    '栽培基质以木屑、棉籽壳等为主'
                ]
            },
            '平菇': {
                category: '菌类及其他',
                icon: 'fa-tree',
                iconColor: 'text-brown-700',
                bgColor: 'bg-brown-200',
                growthPeriod: '生长期约45天',
                description: '平菇是一种常见的食用菌，产量高，适应性强。',
                tips: [
                    '生长适温为20-25℃',
                    '对光照要求不高',
                    '栽培基质广泛'
                ]
            }
        };

        // DOM元素
        const backButton = document.getElementById('backButton');
        const searchInput = document.getElementById('searchInput');
        const categoryButtons = document.querySelectorAll('.category-btn');
        const vegetableCards = document.querySelectorAll('.vegetable-card');
        const vegetableModal = document.getElementById('vegetableModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const closeModal = document.getElementById('closeModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalIconContainer = document.getElementById('modalIconContainer');
        const modalIcon = document.getElementById('modalIcon');
        const modalVegetableName = document.getElementById('modalVegetableName');
        const modalGrowthPeriod = document.getElementById('modalGrowthPeriod');
        const modalCategory = document.getElementById('modalCategory');
        const modalDescription = document.getElementById('modalDescription');
        const modalTips = document.getElementById('modalTips');
        const addPlantBtn = document.getElementById('addPlantBtn');

        // 返回按钮功能
        backButton.addEventListener('click', () => {
            window.history.back();
        });

        // 搜索功能
        searchInput.addEventListener('input', () => {
            const searchTerm = searchInput.value.toLowerCase().trim();
            const activeCategory = document.querySelector('.category-btn.bg-primary')?.textContent.trim() || '全部';
            filterVegetables(searchTerm, activeCategory);
        });

        // 分类标签功能
        categoryButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有按钮的活跃状态
                categoryButtons.forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-white', 'text-gray-600');
                });
                // 添加当前按钮的活跃状态
                button.classList.remove('bg-white', 'text-gray-600');
                button.classList.add('bg-primary', 'text-white');
                
                const category = button.textContent.trim();
                const searchTerm = searchInput.value.toLowerCase().trim();
                filterVegetables(searchTerm, category);
            });
        });

        // 筛选蔬菜
        function filterVegetables(searchTerm, category) {
            vegetableCards.forEach(card => {
                const vegetableName = card.dataset.name.toLowerCase();
                const cardCategory = card.dataset.category;
                
                const matchesSearch = vegetableName.includes(searchTerm);
                const matchesCategory = category === '全部' || cardCategory === category;
                
                if (matchesSearch && matchesCategory) {
                    card.classList.remove('hidden');
                    // 添加渐入动画
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(10px)';
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 50);
                } else {
                    card.classList.add('hidden');
                }
            });
        }

        // 蔬菜卡片点击事件
        vegetableCards.forEach(card => {
            card.addEventListener('click', () => {
                const vegetableName = card.dataset.name;
                showVegetableDetail(vegetableName);
            });
        });

        // 显示蔬菜详情
        function showVegetableDetail(vegetableName) {
            const plant = plantData[vegetableName];
            if (plant) {
                modalTitle.textContent = '蔬菜详情';
                modalIcon.className = `fa ${plant.icon} ${plant.iconColor} text-4xl`;
                modalIconContainer.className = `w-20 h-20 mx-auto mb-4 rounded-full ${plant.bgColor} flex items-center justify-center`;
                modalVegetableName.textContent = vegetableName;
                modalGrowthPeriod.textContent = plant.growthPeriod;
                modalCategory.textContent = plant.category;
                modalDescription.textContent = plant.description;
                
                // 更新种植要点
                modalTips.innerHTML = '';
                plant.tips.forEach(tip => {
                    const li = document.createElement('li');
                    li.textContent = tip;
                    li.className = 'text-gray-600';
                    modalTips.appendChild(li);
                });
                
                // 显示模态框
                vegetableModal.classList.remove('hidden');
                // 添加淡入动画
                setTimeout(() => {
                    vegetableModal.querySelector('.relative').classList.add('animate-fadeIn');
                }, 10);
            }
        }

        // 关闭模态框
        function hideModal() {
            vegetableModal.classList.add('hidden');
        }

        closeModal.addEventListener('click', hideModal);
        modalOverlay.addEventListener('click', hideModal);

        // ESC键关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !vegetableModal.classList.contains('hidden')) {
                hideModal();
            }
        });

        // 添加种植按钮
        addPlantBtn.addEventListener('click', () => {
            const vegetableName = modalVegetableName.textContent;
            // 这里可以添加开始种植的逻辑
            showToast(`已开始种植${vegetableName}`);
            hideModal();
            // 可以跳转到种植页面
            // window.location.href = `planting.html?vegetable=${encodeURIComponent(vegetableName)}`;
        });

        // 提示消息函数
        function showToast(message) {
            // 检查是否已存在toast元素
            let toast = document.getElementById('toastMessage');
            if (!toast) {
                toast = document.createElement('div');
                toast.id = 'toastMessage';
                toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-full shadow-lg z-50 transition-opacity duration-300';
                document.body.appendChild(toast);
            }
            
            toast.textContent = message;
            toast.style.opacity = '1';
            
            setTimeout(() => {
                toast.style.opacity = '0';
            }, 2000);
        }
    </script>
    
    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>
</body>
</html>
